<template>
  <div class="mod-config">
    <basic-container>
        <navigationRenWuShu :sign="{a:false,b:false,c:false,d:false,e:true,f:false}"></navigationRenWuShu>
      <div class="boxsty zhiBiao">
        <!-- <div class="flex justifyContentSpaceBetween">
            <div class="tabletext">任务书结果填报</div>
        </div> -->
        <div  :height="searchheight" >
          <span style="float:right;margin-top: -30px;cursor: pointer;" @click="searchchangeadvanced">{{ searchadvanced ? "查询条件收起" : "查询条件展开" }}
          <i :class="searchadvanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" /> </span>
           <div  v-show="searchadvanced" >
                <div class="flex">
                    <div>
                        <el-form :model="form"  :inline="true" class="form-inline">
                        <el-form-item label="发约人姓名">
                            <el-input v-model="form.fayueName" placeholder="发约人姓名" style="width: 160px;" :clearable="true"></el-input>
                        </el-form-item>
                        <el-form-item label="受约人姓名">
                            <el-input v-model="form.shouyueName" placeholder="受约人姓名" style="width: 160px;" :clearable="true"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button icon="el-icon-search" type="primary" class="marginLeft" @click="getDataList()">检索</el-button>
                        </el-form-item>
                        </el-form>
                    </div>
                </div>
           </div>
        </div>

            <div class="border-top-theme">
                <div class="mt10">
                    任务书
                    <span>
                        <el-radio v-model="radio" label="1">个人</el-radio>
                        <el-radio v-model="radio" label="2">机构</el-radio>
                    </span>
                    <div style="float:right">
                        <el-button v-if="zhiShow=='1'" @click="dingL" type="primary">定量指标填报#</el-button>
                        <el-button v-if="zhiShow=='2'" @click="dingX" type="primary">定性指标填报#</el-button>
<!--                        <el-button type="primary">导出</el-button>-->
<!--                        <el-button type="primary">导入</el-button>-->
                        <el-button type="primary" @click="subBatch">批量填报#</el-button>
                        <el-button type="primary" @click="submitBatch">批量提交#</el-button>
<!--                        <el-button type="primary">批量提交</el-button>-->
                    </div>
                </div>
            </div>
            <tbTableForm v-if="zhiShow=='1'" :zhiShow='1' @tbTableChild="tbTableChild" ref="tbTable"></tbTableForm>
        <div  v-if="zhiShow=='2'">
            <el-table
              ref="table"
              key="1"
              style="width: 100%;margin-top:20px"
              :data="dataList"
              border
              v-loading="dataListLoading">
                <el-table-column type="selection" :selectable="checkSelect" width="55" header-align="center" align="center"></el-table-column>
                <el-table-column type="index" width="80" header-align="center" align="center" label="序号"></el-table-column>
                <el-table-column
                  prop="shouyueName"
                  header-align="center"
                  align="center"
                  min-width="120"
                  label="受约人姓名">
                  <template slot-scope="scope">
                    <div v-for="(item,index) in cutout(scope.row.shouyueName).slice(0, 2)">
                      <el-tooltip class="item" :disabled="cutout(scope.row.shouyueName).length<3" effect="dark" :content="scope.row.shouyueName" placement="top-start">
                        <span>{{item}}<span v-if="cutout(scope.row.shouyueName).length>2&&index==1">...</span></span>
                      </el-tooltip>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="zhibiaoType" label="指标类别" min-width="120" header-align="center" align="center"></el-table-column>
                <el-table-column prop="zhibiaoName" label="指标名称" min-width="120" header-align="center" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column prop="weight" label="权重" min-width="120" header-align="center" align="center"></el-table-column>
                <el-table-column prop="targetValue" label="目标值" min-width="120" header-align="center" align="center"></el-table-column>
                <el-table-column prop="unit" label="单位" min-width="120" header-align="center" align="center"></el-table-column>
                <el-table-column prop="tbSz" label="填报值" min-width="120" header-align="center" align="center">
                    <template slot-scope="scope">
                        <el-input v-if="scope.row.tbzbStatus<1"  oninput ="value=value.replace(/[^0-9.]/g,'')" v-model="scope.row.tbSz" placeholder="填报值" @change="saveWorkZbdl(scope.row)"></el-input>
                      <span v-else>{{scope.row.tbSz}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="得分" width="150" prop="zbDf"  header-align="center" align="center">
                </el-table-column>
                <el-table-column label="操作" width="100"  header-align="center" align="center" fixed="right">
                    <template slot-scope="scope">
                        <el-button type="primary" plain v-if="scope.row.tbzbStatus<1" @click="confirmTianbao(scope.row.zbId)">提交</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="avue-crud__pagination">
            <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
                            :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" background
                            layout="total, sizes, prev, pager, next, jumper">
            </el-pagination>
            </div>
        </div>
      </div>
      <tbDialog :tbDialog='tbDialog' v-if="pltbDialogVisible" @closeDialog="closeDialog"></tbDialog>
    </basic-container>
  </div>
</template>

<script>
import {fetchList, delObj,saveWorkZbdl,confirmTianbaodx,submitBatch} from '@/api/hetongrenwu/gongzuorenwushu/workAssignjgtb'
import tbTableForm from '@/views/hetongrenwu/components/tianbaoTable-form.vue'
import tbDialog from '@/views/hetongrenwu/components/tianbao-dialog.vue'
export default {
    components:{
        tbTableForm,
        tbDialog
    },
    data(){
        return{
            dataList:[],
            dataListLoading:false,
            form:{},
            radio:'1',
            radioTwo:1,
            tableData:[ ],
            pageIndex:1,
            pageSize: 10,
            totalPage: 0,
            zhiShow:1,
            gridData:[
                {
                zhiwu: '经理',
                name: '王小虎',
                status: '退回'
                }
            ],
            leveList:[
                {value:"所属单位部门负责人",label:"所属单位部门负责人"}
            ],
            completion:"",
            dialogVisible:false,
            tbDialog:{},
            searchadvanced: true,
            searchheight: '0',
            tbSelect:[],
            idsStr:String,
            pltbDialogVisible:false
        }
    },
    watch:{
      radio(value){
        if(value){
          this.getDataList();
        }
      }
    },
    created() {
      this.getDataList()
    },
    methods:{
        searchchangeadvanced() {
            this.searchadvanced = !this.searchadvanced;
            if(this.searchadvanced){
                this.searchheight= 'auto'
            }
        },
        //定量
        dingL(){
            this.zhiShow=2;
            this.form={};
            this.pageIndex=1;
            this.pageSize=10;
            this.totalPage=0;
            this.getDataList()
        },
        //定性
        dingX(){
            this.zhiShow=1;
            this.form={};
            this.$nextTick(()=> {
              this.$refs.tbTable.init(Object.assign(this.form,{radio:this.radio}));
            })
        },
        //批量填报
        subBatch(){
          var data=[];
          if(this.zhiShow=='1'){
            data=this.tbSelect;
          }else if(this.zhiShow=='2'){
            data=this.$refs.table.selection;
          }
          if(data.length==0){
            this.$message.error("请至少选择一个指标！");
            return;
          }
          var ids=[];
          for(var i=0;i<data.length;i++){
            ids.push(data[i].zbId)
          }
          var idsStr=ids.join(',')
          this.pltbDialogVisible=true;
          this.tbDialog={
              dialogVisible:true,
              zhiShow:this.zhiShow,
              idsStr:idsStr
          }
        },
      tbTableChild(tbTableChild){
          if(tbTableChild){
            this.tbSelect=tbTableChild
          }

      },
        //子集信息
        zhibiaoChild(zhibiaoChild){
            if(zhibiaoChild){
                this.zhiShow=1

            }
        },
        // 每页数
        sizeChangeHandle(val) {
            this.pageSize = val
            this.pageIndex = 1
            this.getDataList()
        },
        // 当前页
        currentChangeHandle(val) {
            this.pageIndex = val
            this.getDataList()
        },
      // 获取数据列表
      getDataList() {
        if(this.zhiShow=='1'){
          this.$nextTick(()=>{
            this.$refs.tbTable.init(Object.assign(this.form,{radio:this.radio}));
          })
          return false
        }
        this.dataListLoading = true
        fetchList(Object.assign({
          type:this.radio,
          fayuename:this.form.fayueName,
          shouyuename:this.form.shouyueName,
          current: this.pageIndex,
          size: this.pageSize,
          workAssignAuditStatus:7,
          contFillStatus:1,
          dingtype:1
        })).then(response => {
          this.dataList = response.data.data.records;
          this.totalPage = response.data.data.total
        })
        this.dataListLoading = false
      },
      //拆分数据
    cutout(cellValue) {
      if (cellValue) {
        var c = cellValue.split(",");
        if(c.size<1){
          c.push('-');
          c.push('-');
        } else if(c.size<2){
          c.push('-');
        }
        return c;
      }
    },
      saveWorkZbdl(row){
         //console.log(row);
          var params={
            id:row.zbId,
            tbSz:row.tbSz
          }
          saveWorkZbdl(params).then(response => {
            this.getDataList()
          })
      },
      confirmTianbao(data){
        confirmTianbaodx(data).then(response => {
          this.$message.success('提交成功')
          this.getDataList();
        })
      },
      //批量发起
      submitBatch(){
        var data;
        if(this.zhiShow=='1'){
          data=this.tbSelect;
        }else if(this.zhiShow=='2'){
          data=this.$refs.table.selection;
        }
        if(data.length==0){
          this.$message.error("请至少选择一个指标！");
          return;
        }
        var ids=[];
        for(var i=0;i<data.length;i++){
          ids.push(data[i].zbId)
        }
        var idsStr=ids.join(',')
        this.$confirm('是否要提交吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(function () {
          return submitBatch({ids:idsStr})
        }).then(data => {
          this.$message.closeAll();
          this.$message.success('提交成功')
          this.getDataList()
        })
      },
      closeDialog(){
          this.pltbDialogVisible=false;
          this.getDataList();
      },
      checkSelect (row,index) {
        let isChecked = true;
        if (row.tbzbStatus<1 ) { // 判断里面是否存在某个参数
          isChecked = true
        } else {
          isChecked = false
        }
        return isChecked
      },
    }
}
</script>

<style>

</style>
